<template>
	<view class="payment">
		<!-- 我是确认支付页面 -->
		<!-- 自定义导航栏 -->
		<UniNavBar title="确认支付" left-text="关闭" fixed statusBar="true" @clickLeft="goBack">
		</UniNavBar>
		<!-- 支付方式 -->
		<view class="pay-main">
			<label>
				<view class="pay-item">
					<image src="../../static/img/payment/zfb.png" mode="" class="item-left"></image>
					<view class="item-main">
						<view class="main-text">支付宝支付</view>
						<view class="main-tips">推荐支付宝用户使用</view>
					</view>
					<label class="item-right">
						<radio value="" color="#49BDFB" /><text></text>
					</label>
				</view>
			</label>
			
			<label>
				<view class="pay-item">
					<image src="../../static/img/payment/wxf.png" mode="" class="item-left"></image>
					<view class="item-main">
						<view class="main-text">微信支付</view>
						<view class="main-tips">推荐微信用户使用</view>
					</view>
					<label class="item-right">
						<radio value="" color="#49BDFB" /><text></text>
					</label>
				</view>
			</label>
		</view>
		<!-- 底部 -->
		<view class="pay-foot">
			<view class="foot-left">
				<text class="total-text">合计：</text>
				<text class="total-price">￥259.00</text>
			</view>
			<view class="foot-right" @click="goPay">支付</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni/uni-nav-bar/uni-nav-bar.vue";
	export default {
		components: {
			UniNavBar: uniNavBar,
		},
		data() {
			return {

			}
		},
		methods: {
			// 点击关闭返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 去支付
			goPay(){
				uni.navigateTo({
					url:'/pages/paySuccess/paySuccess'
				})
			}
		}
	}
</script>

<style scoped>
	.payment{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #eeeeee;
	}
	.pay-main{
	}
.pay-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 2rpx solid #cccccc;
	background-color: #ffffff;
}
.item-left{
	width: 100rpx;
	height: 100rpx;
}
.main-text{
	/* font-size: 26rpx; */
	font-weight: bold;
}
.main-tips{
	color: #888888;
}
.pay-foot{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	background-color: #ffffff;
}
.foot-left{
	line-height: 100rpx;
}
.total-text{
	padding-left: 20rpx;
	font-size: 30rpx;
}
.total-price{
	font-weight: bold;
	color: #49BDFB;
	font-size: 36rpx;
}
.foot-right{
	line-height: 100rpx;
	text-align: center;
	width: 120rpx;
	font-weight: bold;
	background-color: #49BDFB;
	color: #ffffff;
	padding: 0 60rpx;
	font-size: 36rpx;
}
</style>
